<template>
      <div id="foot">
            <div class="content">
                  <div class="top">
                        <div class="left">
                              <div class="address">
                                    <div class="label">地址</div>
                                    <div class="ress">河南郑州中原国家广告产业园4栋</div>
                              </div>
                              <div class="tel">
                                    <div class="title">电话咨询</div>
                                    <div class="num">400-187-8578</div>
                              </div>
                        </div>
                        <div class="right">
                              <div class="item">
                                    <div class="name">热门产品</div>
                                    <div class="nav">
                                          <div class="navs">蜻蜓支付 <span class="iconhot iconfont icon-hot-"></span> </div>
                                          <div class="navs">青蛙支付</div>
                                          <div class="navs">二维码支付</div>
                                          <div class="navs">收款王支付</div>
                                          <div class="navs">扫码台支付</div>
                                    </div>
                              </div>
                              <div class="item">
                                    <div class="name">合作</div>
                                    <div class="nav">
                                          <div class="navs">招募合伙人</div>
                                          
                                    </div>
                              </div>

                              <div class="item">
                                    <div class="name">关于盈友科技</div>
                                    <div class="nav">
                                          <div class="navs" @click="$router.push('/about')">关于我们</div>
                                          <div class="navs" @click="$router.push('/daili')">加入我们</div>
                                          <div class="navs">新闻动态</div>
                                    </div>
                              </div>

                              <div class="item">
                                    <div class="name">战略合作</div>
                                    <div class="nav">
                                          <div class="navs">
                                                <img src="../assets/img/f1.png" alt="">
                                          </div>
                                          <div class="navs">
                                                <img src="../assets/img/f2.png" alt="">
                                          </div>
                                          <div class="navs">
                                                <img src="../assets/img/f3.png" alt="">
                                          </div>
                                          <div class="navs">
                                                <img src="../assets/img/f4.png" alt="">
                                          </div>
                                    </div>
                              </div>
                        </div>
                  </div>
                  <div class="bottom">

                  </div>
            </div>

            <div class="infobox">
                  © 2019河南盈友网络科技有限公司豫ICP备19039804号
            </div>
      </div>
</template>

<script>
      export default {
            
      }
</script>

<style lang="scss" scoped>
#foot {
      width: 100%;
      background-color: #000;
      padding-top: 20px;
      color: #fff;
      .content {
            width: 1440px;
            margin: 20px auto;
            padding-bottom: 20px;
            
            .top {
                  width: 100%;
                  display: flex;
                  .left {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        .address {
                              .label {
                                    font-size: 30px;
                              }
                              .ress {
                                    font-size: 20px;
                                    margin: 20px 0;
                              }
                        }
                        .tel {
                              text-align: center;
                              margin-top: 60px;
                              .title {
                                    font-size: 30px;
                              }
                              .num {
                                    font-size: 40px;
                                    margin: 20px 0;
                              }
                        }
                  }
                  .right {
                        flex: 1;
                        display: flex;
                        margin-left: 150px;
                        justify-content: space-between;
                        .item {
                              .name {
                                    font-size: 30px;
                              }
                              .nav {
                                    font-size: 20px;
                                    .navs {
                                          line-height: 60px;
                                          cursor: pointer;
                                    }
                              }
                        }
                  }
            }
      }
      .infobox {
            width: 100%;
            text-align: center;
            padding: 30px 0;
            border-top: 1px solid #fff;
      }
}

.iconhot {
      animation: hotshink 0.5s linear infinite;
}
@keyframes hotshink {
      0% {
            color: #fff;
      }
      100% {
            color: red;
      }
}
</style>